<template>
    <div class="main">
        <side-bar-menu side-bar-name="activity/manage"></side-bar-menu>
        <head-nav-bar title-value="活动管理"></head-nav-bar>

        <div class="main-frame">
            <Button type="info" style="margin-bottom: 10px" @click="createActivity">创建活动</Button>

            <Table :columns="tableColumns" :data="tableData"></Table>
        </div>
    </div>
</template>

<script>
    import SideBarMenu from '../components/SideBarMenu'
    import HeadNavBar from '../components/HeadNavBar'
    import util from '../../libs/util'
    import TimeUtil from 'moment'
    import expandContent from './activityManageExpand.vue'
    import expandCreate from './activityManageCreate.vue'

    export default {
        data() {
            return {
                tableColumns: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(expandContent, {
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    {
                        title: '#',
                        key: 'id',
                        width: 50
                    },
                    {
                        title: '活动标题',
                        key: 'title',
                        width: 130
                    },
                    {
                        title: '活动简介',
                        key: 'brief',
                        width: 270
                    },
                    {
                        title: '投票时间',
                        key: 'voteTime',
                        width: 200
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    },
                    {
                        title: '活动状态',
                        key: 'enable',
                        align: 'center',
                    }
                ],
                tableData: [],
                newActivity: {
                    title: '',
                    brief: '',
                    enable: false
                }
            }
        },
        components: {
            SideBarMenu,
            HeadNavBar,
            expandContent,
            expandCreate
        },
        methods: {
            createActivity() {
                this.$Modal.confirm({
                    okText: '创建',
                    onOk: () => {
                        util.ajax({
                            url: '/admin/activity/create',
                            method: 'post',
                            params: {title: this.newActivity.title, brief: this.newActivity.brief, enable: this.newActivity.enable},
                        }).then(response => {

                            if (response.data.errorCode === 0) {
                                this.$Message.success('操作成功');
                                this.retrieveData();
                            } else {
                                this.$Message.error(response.data.message);
                            }

                        }).catch(error => {
                            console.log(error);
                            this.$Message.error('网络错误!');
                        });
                    },
                    render: (h) => {
                        return h(expandCreate, {
                            props: {
                                activity: this.newActivity
                            }
                        })
                    }
                })
            },

            retrieveData() {

                util.ajax({
                    url: '/admin/activity/all',
                    method: 'get',
                    params: {},
                }).then(response => {

                    var data = response.data.data;

                    if (response.data.errorCode === 0) {

                        this.tableData = [];

                        for (var i = 0;i < data.length;i++) {

                            var startDate = TimeUtil.unix(data[i].voteStartTime / 1000).format('YYYY-MM-DD');
                            var endDate = TimeUtil.unix(data[i].voteEndTime / 1000).format('YYYY-MM-DD');
                            var createTime = TimeUtil.unix(data[i].createTime / 1000).format('YYYY-MM-DD HH:mm:ss');
                            var updateTime = TimeUtil.unix(data[i].updateTime / 1000).format('YYYY-MM-DD HH:mm:ss');


                            var activity = {
                                id: data[i].id,
                                title: data[i].title,
                                brief: data[i].brief,
                                voteTime: startDate + ' 至 ' + endDate,
                                updateTime: updateTime,
                                createTime: createTime,
                                enable: data[i].enable
                            };

                            this.tableData.push(activity)
                        }

                    }

                }).catch(error => {//失败
                    console.log(error)
                });
            }
        },

        mounted() {
            this.retrieveData()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
</style>